<script setup lang="ts">
import { watch } from "vue";

import ByIcon from "@/components/ui/ByIcon.vue";
import ApiActivity from "@/api/activity";
import useFetch from "@/hooks/useFetch";

import { richTextFormater } from "@/utils";

import { TActivity } from "@/global";

const { act_id } = defineProps<{
  act_id?: number;
}>();

const showDetail = defineModel<boolean>();

const { data, run } = useFetch<{ detail: TActivity }>(
  ApiActivity.activityDetailConsumer,
  {
    showLoading: true,
    immediate: false,
  }
);

watch(showDetail, (flag) => {
  if (flag && act_id && !data.value) {
    run({ id: act_id });
  }
});
</script>

<template>
  <view class="flex-none safe-footer h-[100px]" />

  <view
    :class="[
      'flex items-end fixed bottom-0 w-full z-20',
      showDetail ? 'h-screen bg-black/50' : '',
    ]"
  >
    <view class="bg-white w-full">
      <view
        class="flex flex-col relative border-b-1 border-[#f5f5f5] duration-200"
        :class="[showDetail ? 'h-[65vh]' : 'h-0 -z-10 opacity-0']"
      >
        <view class="flex-none py-4 bg-primary text-center text-dark"
          >使用说明
        </view>

        <view class="flex-auto p-5 text-primary overflow-auto">
          <rich-text :nodes="richTextFormater(data?.detail.purchase_notice)" />
        </view>
      </view>

      <view class="safe-footer">
        <view
          class="bg-white text-center text-dark py-6"
          @tap="showDetail = !showDetail"
        >
          <view>{{ showDetail ? "收起" : "使用说明" }}</view>
          <ByIcon :name="showDetail ? 'ArrowBottom' : 'ArrowTop'" />
        </view>
      </view>
    </view>
  </view>
</template>
